<template>
  <a-form :model="userForm" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="用户名" v-bind="validateInfos.UserName">
      <a-input v-model:value="userForm.UserName" placeholder="用户名" />
    </a-form-item>

    <a-form-item label="登录账号" v-bind="validateInfos.Account">
      <a-input v-model:value="userForm.Account" placeholder="登录账号" />
    </a-form-item>

    <a-form-item label="登录密码" v-bind="validateInfos.Password">
      <a-input-password v-model:value="userForm.Password" placeholder="登录密码" />
    </a-form-item>
    <a-row>
      <a-col :sm="{ span: 12 }">
        <a-form-item label="是否启用" :label-col="{ push: 4 }" :wrapper-col="{ push: 4, span: 8 }">
          <a-switch v-model:checked="userForm.IsActive" />
        </a-form-item>
      </a-col>
      <a-col :sm="{ span: 12 }">
        <a-form-item label="性别" :label-col="{ push: 4 }" :wrapper-col="{ push: 4, span: 8 }">
          <a-radio-group v-model:value="userForm.Gender">
            <a-radio :value="0">男</a-radio>
            <a-radio :value="1">女</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item label="备注" v-bind="validateInfos.Remark">
      <a-textarea v-model:value="userForm.Remark" placeholder="备注" :rows="4" />
    </a-form-item>
  </a-form>
</template>
<script>
import { defineComponent, reactive, ref, toRaw } from 'vue';
import { Form, message } from 'ant-design-vue';
import { saveUser, getUserById } from '@/api/index.js';
import Util from '@/utils/util.js';
const useForm = Form.useForm;
export default defineComponent({
  props: {
    userId: {
      type: String,
      default: '',
    },
  },
  emits: ['save'],
  setup(props, ctx) {
    const userForm = ref({
      UserName: '',
      Account: '',
      Password: '',
      IsActive: true,
      Gender: 0,
      Remark: '',
    });

    const rulesRef = reactive({
      UserName: [
        {
          required: true,
          message: '请输入用户名！',
          trigger: ['change', 'blur'],
        },
      ],
      Account: [
        {
          required: true,
          message: '请输入登录账号！',
          trigger: ['change', 'blur'],
        },
      ],
      Password: [
        {
          required: true,
          message: '请输入用户密码！',
          trigger: ['change', 'blur'],
        },
      ],
      Remark: [
        {
          max: 100,
          message: '备注不能超过100个字符！',
          trigger: ['change', 'blur'],
        },
      ],
    });

    const { resetFields, validate, validateInfos } = useForm(userForm, rulesRef, {
      onValidate: (...args) => {},
    });

    const save = () => {
      validate()
        .then(async (data) => {
          // // 获取原始值不受响应影响
          // const formValue = toRaw(userForm);
          await saveUser(userForm.value).then(() => {
            ctx.emit('save', true);
            message.success('保存成功！');
          });
        })
        .catch((err) => {
          ctx.emit('save', false);
          message.error('按照表单提示进行填写！');
        });
    };

    const getDataInfo = () => {
      getUserById(+props.userId).then((data) => {
        userForm.value = data.Data;
      });
    };

    if (!Util.isUndefinedOrNullOrWhiteSpace(props.userId)) {
      getDataInfo();
    }

    return {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 18,
      },
      userForm,
      validateInfos,
      resetFields,
      save,
      getDataInfo,
    };
  },
});
</script>
